---
type: tutorial
title: Добавьте динамический контент о себе
description: |-
  Руководство: Создайте свой первый блог на Astro —
  Используйте переменные и условный рендеринг на страницах Astro
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Теперь, когда у вас есть многостраничный сайт с HTML-контентом, пришло время добавить немного динамического HTML!

<PreCheck>
  - Определить заголовок вашей страницы в метаданных и использовать его в HTML
  - Условно отобразить HTML-элементы
  - Добавить немного контента о себе
</PreCheck>

Любой HTML-файл является допустимым языком Astro. Но с помощью Astro вы можете сделать больше, чем просто обычный HTML!

## Определите и используйте переменную

Откройте файл `about.astro`, который должен выглядеть следующим образом:

```astro title="src/pages/about.astro"
---
---
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Главная</a>
    <a href="/about/">О сайте</a>
    <a href="/blog/">Блог</a>
    <h1>Обо мне</h1>
    <h2>... и моем новом сайте на Astro!</h2>

    <p>Я прохожу вводный учебник по Astro. Это вторая страница моего сайта, и это первая страница, которую я создал самостоятельно!</p>

    <p>Сайт будет обновляться по мере прохождения учебника, так что заходите сюда снова и следите за моим прогрессом!</p>
  </body>
</html>
```

<Steps>
1. Добавьте следующую строку JavaScript в метаданные, между **разделителями кода**:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "Обо мне";
    ---
    ```

2. Замените статический заголовок "Astro" и заголовок "About Me" в вашем HTML динамической переменной `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="ru">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Главная</a>
        <a href="/about/">О сайте</a>
        <a href="/blog/">Блог</a>
        <h1>Обо мне</h1>
        <h1>{pageTitle}</h1>
        <h2>... и моем новом сайте на Astro!</h2>

        <p>Я прохожу вводный учебник по Astro. Это вторая страница моего сайта, и это первая страница, которую я создал самостоятельно!</p>

        <p>Сайт будет обновляться по мере прохождения учебника, так что заходите сюда снова и следите за моим прогрессом!</p>
      </body>
    </html>
    ```

3. Обновите предварительный просмотр страницы `/about`.

    Текст страницы должен выглядеть так же, а заголовок страницы, отображаемый на вкладке браузера, теперь должен гласить «Обо мне» вместо «Astro».

    Вместо того чтобы вводить текст непосредственно в HTML-теги, вы просто **определили и затем использовали переменную** в двух разделах вашего файла `.astro` соответственно.

4. Используйте тот же шаблон для создания значения `pageTitle`, которое будет использоваться в `index.astro` ("Главная") и `blog.astro` ("Мой блог об изучении Astro"). Обновите HTML этих страниц в обоих местах, чтобы название страницы совпадало с заголовком, отображаемым на каждой странице.
</Steps>

:::note[Выводы]
1. **Определяйте** переменные в своем скрипте Astro с помощью выражений JavaScript или TypeScript.
2. **Используйте** эти переменные в вашем шаблоне Astro внутри фигурных скобок `{ }`, чтобы сообщить Astro, что вы используете JavaScript.
:::

## Запись выражений JavaScript в Astro

<Steps>
1. Добавьте следующий JavaScript в метаданные, между **разделителями кода**:

      (Вы можете настроить код под себя, но в данном руководстве будет использован следующий пример).

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "Обо мне";

    const identity = {
      firstName: "Сара",
      country: "Канада",
      occupation: "Технический писатель",
      hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];
    ---
    ```

2. Затем добавьте следующий код в ваш HTML-шаблон, под существующим контентом:

    ```astro title="src/pages/about.astro"
    <p>Несколько фактов обо мне:</p>
    <ul>
      <li>Меня зовут {identity.firstName}.</li>
      <li>Моя страна — {identity.country}, а род занятий — {identity.occupation}.</li>
      {identity.hobbies.length >= 2 &&
        <li>Два моих увлечения: {identity.hobbies[0]} и {identity.hobbies[1]}</li>
      }
    </ul>
    <p>Мои навыки:</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[Выводы]
1. Написание шаблона Astro очень похоже на **написание HTML**, но вы можете включать в него выражения JavaScript.
2. Блок метаданных Astro содержит только JavaScript.
3. Вы можете использовать все современные **логические операторы**, **выражения** и **функции** JavaScript в любой секции вашего `.astro`-файла. Но фигурные скобки необходимы (только) в теле шаблона HTML.
:::

<Box icon="question-mark">

### Проверьте свои знания

1. Метаданные файла `.astro` пишутся на:

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. В дополнение к HTML синтаксис Astro позволяет включать:

    <MultipleChoice>
        <Option isCorrect>Логические операторы, выражения и функции JavaScript</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. Когда нужно писать JavaScript в фигурных скобках?

    <MultipleChoice>
        <Option>
          Когда вы не уверены, что это правильно.
        </Option>
        <Option isCorrect>
          В разделе HTML-шаблона компонента Astro.
        </Option>
        <Option>
          Между разделителями кода в компоненте Astro.
        </Option>
    </MultipleChoice>
</Box>

## Рендеринг элементов по условию

Вы также можете использовать свои скрипты, чтобы выбирать **нужно ли** отрисовывать отдельные элементы содержимого HTML-тега `<body>`.

<Steps>
1. Добавьте следующие строки в ваш блок метаданных, чтобы **определить переменные**:

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "Обо мне";

    const identity = {
      firstName: "Сара",
      country: "Канада",
      occupation: "Технический писатель",
      hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Добавьте следующие строки под существующими параграфами.

    Затем проверьте предварительный просмотр во вкладке браузера, чтобы увидеть, что отображается на странице:

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>Я рад(а) изучать Astro!</p>}

    {finished && <p>Я завершил(а) это руководство!</p>}

    {goal === 3 ? <p>Моя цель — завершить за 3 дня.</p> : <p>Моя цель — не 3 дня.</p>}
    ```

3. Зафиксируйте изменения на GitHub, прежде чем двигаться дальше. Делайте это всякий раз, когда хотите сохранить свою работу и обновить сайт.
</Steps>

:::tip
Синтаксис шаблонов Astro похож на синтаксис JSX. Если вам когда-либо потребуется узнать, как использовать свой скрипт в HTML, поиск информации о том, как это делается в JSX, вероятно, будет хорошей отправной точкой!
:::


<Box icon="question-mark">

### Проанализируйте шаблон

Предположим, дан следующий скрипт `.astro`:

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "ботинок";
const student = false;
---
```


Для каждого выражения шаблона Astro, можете ли вы предсказать HTML (если таковой имеется!), который будет отправлен в браузер? Нажмите, чтобы узнать, правы ли вы!

1.  `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{student && <p>Я до сих пор учусь в школе</p>}`

    <p>
      <Spoiler>Ничего не отобразится, потому что `student` имеет значение `false`.</Spoiler>
    </p>

3.  `<p>У меня есть {quantity + 8} пар {footwear}</p>`

    <p>
      <Spoiler>`<p>У меня есть 11 пар ботинок</p>`</Spoiler>
    </p>

4.  `{operatingSystem === "MacOS" ? <p>Я использую Mac.</p> : <p>Я не использую Mac.</p>}`

    <p>
      <Spoiler>`<p>Я не использую Mac.</p>`</Spoiler>
    </p>
</Box>


<Box icon="check-list">
## Контрольный список

<Checklist>
- [ ] Я умею определять значения в файлах `.astro` и использовать их.
- [ ] Я умею рендерить элементы HTML по условию.
</Checklist>
</Box>


### Ресурсы

- [Динамические выражения в Astro](/ru/reference/astro-syntax/#jsx-like-expressions)
